<template>
	<view class="">
		<xiugai :userInfo="allInfo" v-if="isshow" @ishide="getIshide"></xiugai>
		<view v-else class="page">
			<view class="mask" v-if="ewmshow" @click="hideewm"></view>
			<view class="erweima" v-if="ewmshow">
				<view class="ewmtop">
					<image class="ewmtx" :src="getImg(allInfo.userImg)"></image>
					<view class="ewmname">
						<view class="grzx-title-txt-txt" v-if="allInfo.isdenglu">{{allInfo.realName}}</view>
						<view class="grzx-title-txt-zf" v-if="allInfo.isdenglu">{{allInfo.phone}}</view>
					</view>
				</view>
				<image class="ewmtp" :src="getImgUrl('/'+allInfo.ewm)" mode="aspectFill"></image>
			</view>
			<view class="grzx-title">
				<image class="grzx-title-dt" :src="getImges('hshd-grzx-bg.png')"></image>
				<image class="grzx-title-tx" v-if="allInfo.isdenglu&&allInfo.userImg!=''" :src="getImg(allInfo.userImg)" @click="tcdl"></image>
				<image class="grzx-title-tx" v-if="allInfo.isdenglu&&allInfo.userImg==''" src="https://hshd.tour-ma.com/r/cms/www/hebi/img/img_grzxtx.jpg" @click="tcdl"></image>
				<image class="grzx-title-tx" @click="gotodl" v-if="!allInfo.isdenglu" src="https://hshd.tour-ma.com/r/cms/www/hebi/img/img_grzxwdltx.png"></image>
				<view class="grzx-title-txt">
					<view class="grzx-title-txt-txt" v-if="allInfo.isdenglu">{{allInfo.realName}}</view>
					<view class="grzx-title-txt-zf" v-if="allInfo.isdenglu">{{allInfo.phone}}</view>
					<text class="grzx-title-txt-txt"  @click.stop="gotodl" v-else>点击登录/注册</text>
				</view>
				<view class="hym">
					<image @click="showewm" class="ewm" :src="getImg1('wfxcx-icon-hym2.png')" mode="aspectFill"></image>
					会员码
				</view>
				<view class="hyzx">
					<view class="hyzxlist" v-for="(item,ind) in hylist" @click="nato(item.url)">
						<view class="hyzxv">{{item.value}}</view>
						<view class="hyzxn">{{item.name}}</view>
					</view>
				</view>
			</view>
			<view class="grzxlist">
				<view class="grzxlist-box">
					<view class="grzxlist-title">
						<view class="wddd">我的订单</view>
					</view>
					<view class="grzxlist-name">
						<view class="grzxlist-li" v-for="(el,ind) in list3" @click="tourl(el.url)">
							<image class="grzxlist-li-img" :src="getImges(el.img)"></image>
							<view class="grzxlist-li-txt">
								<text class="grzxlist-li-txt-txt">{{el.name}}</text>
							</view>
						</view>
					</view>
					<view class="gexian"></view>
				</view>
				<view class="grzxlist-box">
					<view class="grzxlist-title">
						<view class="wdyy">我的应用</view>
					</view>
					<view class="grzxlist-name">
						<view class="grzxlist-li" v-for="(el,ind) in list2" @click="tourl(el.url)">
							<image class="grzxlist-li-img" :src="getImges(el.img)"></image>
							<view class="grzxlist-li-txt">
								<text class="grzxlist-li-txt-txt">{{el.name}}</text>
							</view>
						</view>
					</view>
					<view class="gexian"></view>
				</view>
				<view class="grzxlist-box yxzx">
					<view class="grzxlist-title">
						<view class="wdyy">我的工具</view>
					</view>
					<view class="grzxlist-name">
						<view class="grzxlist-li" v-for="(el,ind) in list4" @click="tourl(el.url)">
							<image class="grzxlist-li-img" :src="getImges(el.img)"></image>
							<view class="grzxlist-li-txt">
								<text class="grzxlist-li-txt-txt">{{el.name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bg" @click="hidexgxx" v-if="xgxx" :style="{height:wheight+'px'}"></view>
			<view class="woxx" v-if="xgxx" :style="{top:wheight/2+'px'}">
				<view class="woxx-name">
					<text class="woxx-name-t">昵称</text>
					<text class="woxx-name-n">{{allInfo.realName}}</text>
					<text class="woxx-name-b">修改</text>
				</view>
				<view class="woxx-name">
					<text class="woxx-name-t">手机号</text>
					<text class="woxx-name-n">{{allInfo.phone}}</text>
					<text class="woxx-name-b">{{sjhcz}}</text>
				</view>
				<view class="woxx-name">
					<text class="woxx-name-t">头像</text>
					<view class="woxx-name-n">
						<image v-if="allInfo.userImg==''" class="woxx-name-i" src="https://hshd.tour-ma.com/r/cms/www/hebi/img/img_grzxtx.jpg"></image>
						<image v-else class="woxx-name-i" :src="getImg(allInfo.userImg)"></image>
					</view>
					<text class="woxx-name-b">更换</text>
				</view>
				<view class="tcdl" @click="tcdlyh">
					<text class="tcdl-txt">退出登录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var web = require('../../components/utils/request.js');
	import xiugai from './xiugai.vue'
	export default {
		props:['info'],
		components:{xiugai},
		data() {
			return {
				isshow:false,
				allInfo:{},
				hylist:[{
					name:'购物车',
					value:0,
					url:'/pages/gouwu1/carts'
				},{
					name:'积分',
					value:0
				},{
					name:'优惠券',
					value:0,
					url:'/pages/kaqaun/index'
				},{
					name:'收藏数',
					value:0,
					url:'/pages/wode/shouchang'
				}],
				ewmshow:false,
				userInfo:{
					realName:'',
					phone:'',
					userImg:'',
				},
				isdenglu:false,//判断是否登录
				list: [{
						name: '收藏',
						img: 'hshd-grzx-icon7.png',
						url:'/pages/wode/shouchang'
					},
					{
						name: '购物车',
						img: '/r/cms/www/hebi/img/icon_grzxgwc.png',
						// url:'/pages/wode/gouwuche'
						url:'/pages/gouwu1/carts'
					},
					{
						name: '全部订单',
						img: '/r/cms/www/hebi/img/icon_grzxqbdd.png',
						url:'/pages/wode/dingdan'
					},
					{
						name: '定制',
						img: '/r/cms/www/hebi/img/icon_grzxdz.png',
						url:'/pages/dingzhi/dingzhi'
					},
					{
						name: '优惠券',
						img: '/r/cms/www/hebi/img/icon_grzxyhq.png',
						url:'/pages/kaqaun/index'
					},
					{
						name: '我的预约',
						img: '/r/cms/www/hebi/img/icon_grzxwdyy.png',
						url:'/pages/wode/shouchang'
					},
					{
						name: '消息',
						img: '/r/cms/www/hebi/img/icon_grzxdxx.png',
						url:'/pages/wode/shouchang'
					},
					{
						name: '关于我们',
						img: '/r/cms/www/hebi/img/icon_grzxgywm.png',
						url:'/pages/wode/guanyu'
					},
					{
						name: '兑换中心',
						img: '/r/cms/www/hebi/img/icon_grzxdhzx.png',
						url:'/pages/wode/shouchang'
					},
				],
				//订单
				list1: [
					{
						name: '购物车',
						img: '/r/cms/www/weifang/ximg/icon_grzxgwc.png',
						url:'/pages/gouwu1/carts'
					},
					// {
					// 	name: '个人定制',
					// 	img: '/r/cms/www/hebi/img/icon_grzxdz.png',
					// 	url:'/pages/dingzhi/dingzhi'
					// }
				],
				//订单1
				list3: [{
						name: '门票订单',
						img: 'hshd-grzx-icon1.png',
						url:'/pages/wode/dingdan?id=1'
					},
					{
						name: '特产订单',
						img: 'hshd-grzx-icon2.png',
						url:'/pages/wode/dingdan?id=3'
					},
					{
						name: '住宿订单',
						img: 'hshd-grzx-icon3.png',
						url:'/pages/wode/dingdan?id=2'
					},
					{
						name: '餐饮订单',
						img: 'hshd-grzx-icon4.png',
						url:'/pages/wode/dingdan?id=4'
					},
					// {
					// 	name: '景酒订单',
					// 	img: 'hshd-grzx-icon5.png',
					// 	url:'/pages/wode/dingdan?id=5'
					// },
					// {
					// 	name: '行程订单',
					// 	img: 'hshd-grzx-icon6.png',
					// 	url:'/pages/wode/dingdan?id=6'
					// }
				],
				//应用
				list2: [{
						name: '收藏',
						img: 'hshd-grzx-icon7.png',
						url:'/pages/wode/shouchang'
					},
					{
						name: '优惠券',
						img: 'hshd-grzx-icon8.png',
						url:'/pages/kaqaun/index'
					},
					{
						name: '意见反馈',
						img: 'hshd-grzx-icon8.png',
						url:'/pages/zx/jianyi'
					},
					{
						name: '全民营销',
						img: 'hshd-grzx-icon10.png',
						url:'/pages/qmyx/qmyx'
					}
				],
				list4:[
					{
						name: '常用地址',
						img: 'hshd-grzx-icon11.png',
						url:'/pages/wode/cydz'
					},	{
						name: '我的评论',
						img: 'hshd-grzx-icon12.png',
						url:'/pages/wode/wdpl'
					},	{
						name: '旅游攻略',
						img: 'hshd-grzx-icon13.png',
						url:'/pages/wode/youji'
					}
				],
				wheight:0,//屏幕高度
				uname:"测试",//'昵称'
				sjhcz:'',//判断是否有电话号码
				xgxx:false,//修改用户信息
			}
		},
		mounted() {
			this.allInfo=this.info;
			if(this.allInfo.phone==''){
				this.sjhcz='绑定'
			}else{
				this.sjhcz='更换'
			}
			var that=this;
			uni.getSystemInfo({
			    success: function (res) {
					that.wheight=res.windowHeight
			    }
			});
			console.log(this.allInfo)
			// this.getInfo();
		},
		methods: {
			getImges(url){
				return '../../static/wode/'+url
			},
			hideewm(){
				this.ewmshow=false;
			},
			showewm(){
				if(!this.isdenglu){
					uni.showToast({
						title: '未登录'
					});
					return
				}
				this.ewmshow=true;
			},
			tourl(url){
				if(url!=''){
					uni.navigateTo({
						url:url
					})
				}
			},
			getImg(icon){
				return  icon;
			},
			getImg1(icon){
				return "https://hshd.tour-ma.com/r/cms/www/weifang/ximg/"+icon
			},
			getImgUrl(icon) {
				return "https://hshd.tour-ma.com" + icon;
			},
			natodd(){
				uni.navigateTo({
					url:'/pages/wode/dingdan'
				})
			},
			nato(url){
				uni.navigateTo({
					url:url
				})
			},
			gotodl(){//跳转登录
				uni.navigateTo({
					url:'/pages/denglu/denglu'
				})
			},
			hidexgxx(){
				this.xgxx=false;
			},
			tcdl(){//展示用户信息
				this.isshow=true;
			},
			getIshide(e){//监听隐藏
				this.isshow=e;
			}
		}
	}
</script>

<style lang="scss">
	.hyzx{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 630rpx;
		position: absolute;
		bottom: 175rpx;
	}
	.hyzxlist{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.hyzxv{
		color: #000;
		font-weight: bold;
		font-size: 36rpx;
	}
	.hyzxn{
		color: #333;
		font-size: 26rpx;
	}
	.mask{
		background: rgba(0,0,0,0.5);
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 100vh;
		z-index:999;
	}
	.ewmtx{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.ewmname{
		margin-left: 10rpx;
	}
	.ewmtop{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 85%;
		margin-top: 30rpx;
	}
	.erweima{
		width: 620rpx;
		height: 700rpx;
		border-radius: 20rpx;
		background: #fff;
		position: fixed;
		top: 50%;
		margin-top: -350rpx;
		left: 65rpx;
		z-index:9999;
		box-shadow:0 1rpx 10rpx #999;
		display: flex;
		flex-direction: column;
		align-items: center;
		.ewmtp{
			width: 400rpx;
			height: 400rpx;
			margin-top: 50rpx;
		}
	}
	.hym{
		position: absolute;
		right: 5%;
		top: 65rpx;
		display:flex;
		flex-direction:column;
		align-items: center;
		font-size: 22rpx;
		width: 80rpx;
	}
	.ewm{
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 10rpx;
	}
	.page{
		background-color: #f5f5f5;
		padding-bottom: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 750rpx;
	}
	.tcdl-txt{
		color: #FFFFFF;
		width: 200upx;
		height: 70upx;
		line-height: 70upx;
		text-align: center;
	}
	.tcdl{
		width: 200upx;
		height: 70upx;
		line-height: 70upx;
		background-color: #5DA343;
		text-align: center;
		margin-left: 200upx;
		border-bottom-left-radius:10upx;
		border-bottom-right-radius: 10upx;
		border-top-left-radius: 10upx;
		border-top-right-radius: 10upx;
	}
	.woxx-name-b{
		width: 100upx;
		height: 100upx;
		line-height: 100upx;
	}
	.woxx-name-i{
		width: 100upx;
		height: 100upx;
		border-bottom-left-radius:50upx;
		border-bottom-right-radius: 50upx;
		border-top-left-radius: 50upx;
		border-top-right-radius: 50upx;
		margin-left: 100upx;
	}
	.woxx-name-n{
		width: 300upx;
		height: 130upx;
		line-height: 110upx;
		text-align: center;
	}
	.woxx-name-t{
		width: 150upx;
		height: 130upx;
		line-height: 110upx;
		text-align: center;
	}
	.woxx-name{
		height: 130upx;
		line-height: 110upx;
		text-align: center;
		margin-left: 35upx;
		/* #ifndef APP-PLUS */
		display: flex;
		/* #endif */
		flex-direction: row;
	}
	.bg{
		background-color: #000;
		opacity: 0.5;
		position: fixed;
		top: 0;
		left: 0;
		width: 750upx;
		/* #ifndef APP-PLUS */
		height: 100%;
		/* #endif */
		z-index:1;
	}
	.woxx{
		width: 600upx;
		height: 500upx;
		background-color: #f5f5f5;
		margin-left: 75upx;
		position: fixed;
		margin-top: -250upx;
		z-index:9;
		border-bottom-left-radius:20upx;
		border-bottom-right-radius: 20upx;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
	}
	.grzx-title {
		width: 750upx;
		height: 486upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}
	.grzx-title-dt {
		width: 750upx;
		height: 486upx;
	}

	.grzx-title-tx {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		position: absolute;
		top: 55rpx;
		left: 5%;
	}

	.grzx-title-txt {
		position: absolute;
		top: 70rpx;
		left: 180rpx;
	}
	.grzx-title-txt-zf{
		font-size: 26upx;
		font-weight: 400;
		color: #000;
	}
	.grzx-title-txt-txt {
		text-align: left;
		font-size: 30upx;
		font-weight: bold;
		color: #333;
	}

	.grzxlist {
		background-color: #fff;
		width: 694upx;
		border-radius: 20rpx;
	}
	.qmyx{
		width: 694upx;
		height: 189upx;
		margin: 30upx auto 30upx;
		box-shadow:1rpx 4rpx 8rpx #d7d7d8
	}
	.yszs{
		border-radius: 20rpx 20rpx 0 0;
	}
	.yzxz{
		border-radius: 0 0 20rpx 20rpx;
	}
	.grzxlist-box{
		width: 694upx;
		margin: 0 auto;
		background-color: #ffffff;
		border-radius: 20upx;
		position: relative;
		padding-top: 15rpx;
		top: -35rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.gexian{
		width: 660rpx;
		height: 1px;
		background: #DDDDDD;
		border-radius: 1rpx;
	}
	.grzxlist-title{
		width: 626rpx;
		margin: 20upx auto 0;
		position: relative;
	}
	.grzxlist-name {
		/* #ifndef APP-PLUS */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		padding: 30upx 0;
		width: 660rpx;
	}
	.grzxlist-li:active{
		box-shadow: 0 4rpx 9rpx rgba(0,0,0,0.1);
	}
	.grzxlist-li {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 20rpx 0;
	}

	.grzxlist-li-img {
		width: 58upx;
		height: 58upx;
		/* margin-left: 99upx; */
		margin: 0 auto;
	}

	.grzxlist-li-txt {
		margin-top: 10upx;
		width: 100%;
	}

	.grzxlist-li-txt-txt {
		width: 100%;
		text-align: center;
		font-size: 29upx;
		font-weight: 400;
		color: #666;
	}
	.grzxwydz{
		width: 292upx;
		line-height: 81upx;
		/* #ifdef APP-PLUS */
		height: 81upx;
		/* #endif */
		margin-left: 226upx;
		margin-top: 102upx;
		border-radius: 39upx;
		border-color: #5DA343;
		border-width: 3upx;
		border-style: solid;
	}
	.grzxwydz-txt{
		font-size:29upx;
		text-align: center;
		font-weight:400;
		color:rgba(93,163,67,1);
	}
</style>
